<template>
    <div class="addressList">
        <!-- 订单信息 -->
        <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
        <div class="content" v-if="showEdit">
            <van-address-list v-model="chosenAddressId" :list="newList" default-tag-text="默认" add-button-text="添加地址"
                @add="onAdd" @edit="onEdit" />
            <!--             
            123456 -->
            <!-- </van-address-list> -->
        </div>
        <div class="content" v-else>
            <van-address-edit detail-rows="2" :area-list="areaList" show-delete show-set-default
                :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
                @change-detail="onChangeDetail" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
// import { areaList } from '@vant/area-data';
import { getAreaList, handleAddress, getAddress } from '../../../api/index';

const chosenAddressId = ref('1');
const searchResult = ref([]);
const showEdit = ref(true);
// 定义onClickLeft方法
const onClickLeft = () => {
    console.log(showEdit.value)
    if (showEdit.value) {
        history.back()
    } else {
        showEdit.value = true
    }
};
let formData = new FormData();

const list: any = [];
const newList = ref([list])

// 假设这是从 API 或其他数据源获取的地址数据
const areaData = [
    // ... 你提供的 JSON 数据
];

// 构建 areaList 对象
const areaList = ref({});
// const buildAreaList = (data) => {
//     const result = { province_list: {}, city_list: {}, county_list: {} };
//     data.forEach(province => {
//         result.province_list[province.id] = province.name;
//         province.son.forEach(city => {
//             result.city_list[city.id] = city.name;
//             if (city.son && city.son.length > 0) {
//                 city.son.forEach(county => {
//                     result.county_list[county.id] = county.name;
//                 });
//             }
//         });
//     });
//     return result;
// };



const onAdd = () => {
    showEdit.value = false;
};
const onEdit = (item: any, index: any) => {
    console.log(item, index, item.id)
    // if (condition) {
        
    // } else {
        
    // }
    // handelEditAdrss(item, item.id)
};
// 转换函数
function convertData(original) {
    return {
        id: original.id,
        name: original.realname,
        tel: original.mobile,
        address: `${original.province}${original.city}${original.district}${original.address}`,
        isDefault: original.status == 1 ? true : false // 这里根据需要设置默认值，这里假设为false
    };
}

onMounted(() => {
    getAddress(formData).then(res => {
        // console.log(res.data)
        // 使用map方法转换数据并合并数组
        const convertedData = res.data.map(convertData);
        list.push(...convertedData);
        newList.value = list;
        // console.log(list);
    })

    getAreaList().then(res => {
        if (res.code == 1) {
            // console.log(1,areaList.value)
            // console.log(2,res.data)
            // areaData.value=res.data;
            // console.log(buildAreaList(res.data))
            // areaList.value=buildAreaList(res.data)
            areaList.value = res.data

            // console.log(3, areaList.value)
        } else {

        }
    })
})
const handelEditAdrss = (content: any, id?: any) => {
    // console.log(content)
    formData = new FormData();
    formData.append("mobile", content.tel)
    formData.append("area", content.areaCode)
    formData.append("address", content.addressDetail)
    formData.append("realname", content.name)
    formData.append("status", content.isDefault == true ? "1" : "0")
    formData.append("id", !!id ? id : "")
    handleAddress(formData).then(res => {
        if (res.code == 1) {
            Toast(res.msg)
            // console.log(res.data)
            showEdit.value = true;
            formData = new FormData();
            getAddress(formData).then(res => {
                // console.log(res.data)
                // 使用map方法转换数据并合并数组
                const convertedData = res.data.map(convertData);
                list.push(...convertedData);
                newList.value = list;
                // console.log(list);
            })
            formData = new FormData();
        } else {
            Toast(res.msg)
        }
    })
}
const onSave = (content: any) => {
    handelEditAdrss(content)
};
const onDelete = () => Toast('delete');

// const areaList=()=>areaList;

</script>

<style lang="less" scoped>
@import url(../../../style/common.css);
.van-nav-bar {
    height: 52px;
}
.addressList {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.content {
    // padding: 15px;
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}
</style>